<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2022-01-01 18:04:42
-->
<template>
    <div class="dailySongs">
        <div class="header">
            <div class="header-top flex-c">
                <div class="relative today flex-c-c">
                    <SvgIcon name="calendar" size="80" class="trans fill-theme" />
                    <span class="absolute top-6 trans">{{ today }}</span>
                </div>
                <div class="ml-5 message flex-col-c-b">
                    <div class="text-xl font-bold trans text-main-text-color">每日歌曲推荐</div>
                    <div class="mt-1 text-sm text-sub-text-color">根据你的音乐口味生成, 每天6：00更新</div>
                </div>
            </div>
            <div class="header-bottom">123</div>
        </div>
        <MyTable :tableData="songs" :columns="columns">
            <template #name="{ scope }">
                <span class="cursor-pointer" v-html="getSongName(scope.name, scope.alia)"></span>
            </template>
            <template #singer="{ scope }">{{ getSingers(scope.ar) }}</template>
            <template #album="{ scope }">{{ scope.al.name }}</template>
            <template #time="{ scope }">{{ getSongTime(scope.dt) }}</template>
        </MyTable>
    </div>
</template>

<script lang='ts' setup>
import { getDailyRecommendSong } from '@/service/api/songList/songList'
import { onMounted, ref } from 'vue';

import type { allArray, IAllObject } from '@/types/base'
import SvgIcon from '@/components/svgIcon/svgIcon.vue';
import { usePlay } from '@/hooks/play/usePlay'
import { useSong } from '@/hooks/song/useSong'
import MyTable from '@/components/table/myTable.vue';
import { IColumn } from '@/components/table/types';

const { playMusic } = usePlay()
const { getSongName, getSingers, getSongTime } = useSong()

const today = new Date().getDate()
const songs = ref<allArray>([])

// 点击歌曲名称
const titleClick = (row: IAllObject) => {
    playMusic(row.id)
}

const columns: IColumn[] = [
    {
        label: '标题',
        prop: 'name',
        width: '120',
        flex: 5,
        class: 'text-main-text-color',
        dbClick: titleClick
    },
    {
        label: '歌手',
        prop: 'singer',
        flex: 2
    },
    {
        label: '专辑',
        prop: 'album',
        flex: 3
    },
    {
        label: '时长',
        prop: 'time',
        flex: 1
    }
]

onMounted(async () => {
    const { data: { dailySongs, recommendReasons } } = await getDailyRecommendSong()
    songs.value = dailySongs
})

</script>

<style scoped lang='scss'>
:deep(.myTable) {
}
.header {
    @apply px-6;
    .header-top {
        width: 100%;
        height: 120px;
        .today {
            color: $theme-color;
            font-size: 35px;
            font-weight: bold;
        }
    }
}
</style>